<template>
    <div>
         <div class="kapian">
              <el-row>
  <el-col :span="8" style="float:right" 
 
  >
    <el-card :body-style="{ padding: '20px' }" style="width:300px;"  v-loading="isloading">
      <img :src="imgurl.url" class="image">
      <div style="padding: 14px;">
        <span class="span">{{imgurl.desc}}</span>
        <div class="bottom clearfix">
          <!-- <time class="time">2020-1-1</time> -->
          <el-button  icon="el-icon-mouse" circle class="but"
          @click="randomnum"
           ></el-button>
        </div>
      </div>
    </el-card>
  </el-col>
</el-row>
            </div>
    </div>
</template>

<script>
import axiox from 'axios'
export default {
    name: 'VueGirls',
    props:['girls'],
    

    data() {
        return {
            imgurl:{},
            isloading:true
        };
    },
    created() {
        this.randomnum() //干嘛的？是让他刷新页面就显示数据而不是只有点击按钮才显示数据
    },
    

    methods: {
        randomnum(){
            this.isloading = true
           axiox({
               url:'https://gank.io/api/v2/random/category/Girl/type/Girl/count/1'
           }).then(res=>{
            //    console.log(res.data.data)
            this.imgurl = res.data.data[0]
           }).catch(()=>{
               this.$message.error('网络错误');
           }   
           )
           .finally(()=>{
               this.isloading = false
           })
        }
    },
};
</script>

<style scoped>
.image{
    width: 250px;
    height: 250px;
    object-fit: cover;
}
.el-button {
    /* background-color: blue !important; */
    margin-left: 100px;
}
.span{
    font-size: 12px;
    height: 20px;
    overflow: hidden;
}
</style>